<div class="grid-select-view" ng-controller="GridSelectCtrl"
     ng-switch on="gridSelectDetailDisplay"
     ng-animate="{enter: 'animate-cube-hor-enter', leave: 'animate-cube-hor-leave'}">
    <div class="grid-view" ng-switch-when="false" ng-controller="GridCtrl">
        <div class="grid-wrapper animate-slide-right"
             ng-switch on="gridSelect">
            <div class="grid-page" ng-switch-when="before">
                <ul class="grid-page-wrapper">
                    <li class="grid-item" ng-repeat="item in productPages(gridCurrent)"
                        ng-click="productSelected()">
                        <div class="grid-item-img" style="{{item.img}}"></div>
                        <div class="grid-item-info">
                            <div class="grid-item-label">{{item.name}}</div>
                            <div class="grid-item-price">{{item.price}}</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="grid-page" ng-switch-when="after">
                <ul class="grid-page-wrapper">
                    <li class="grid-item" ng-repeat="item in productPages(gridCurrent)"
                        ng-click="productSelected()">
                        <div class="grid-item-img" style="{{item.img}}"></div>
                        <div class="grid-item-info">
                            <div class="grid-item-label">{{item.name}}</div>
                            <div class="grid-item-price">{{item.price}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="grid-tag-list">
            <div class="grid-tag-item transit selected {{gridCurrent == $index}}"
                 ng-repeat="item in productPages()"
                 ng-click="gridNumSelect()">{{$index+1}}
            </div>
        </div>

    </div>

    <div class="grid-detail" ng-switch-when="true" >
        <div class="grid-page-wrapper">
            <a class="button-cancel" ng-click="productCancel()">X</a>
            <div class="grid-item-img" style="{{gridItemSelect.img}}"></div>
            <div class="grid-item-info">
                <div class="grid-item-label">{{gridItemSelect.name}}</div>
                <div class="grid-item-price">{{gridItemSelect.price}}</div>
            </div>
        </div>
    </div>
</div>